<template>
  <div>
    <div class="c-ph24">
      <live-item :isMy='true' :liveList="liveList"></live-item>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无我看过的直播记录"></loading-status-tem>
    </div>
    <router-link to="/homePage/marketing/winningRecord?totalReward=1" class="myprize-entry c-pf"></router-link>
  </div>
</template>

<script>
import LiveItem from "@/components/templates/liveItem.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: "MyLiveList",
  components: {
    loadingStatusTem,
    LiveItem,
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      liveList: []
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    getLiveList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(
        global.apiurl + "liveFlow/getMyLiveVideo?page=" + pageIndex + '&limit=' + LIMIT,
        res => {
          if (pageIndex == 1) {
            this.liveList = res.data;
          } else {
            this.liveList = [...this.liveList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的直播间", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的直播间", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.liveList.length > 0) {
          this.getLiveList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.liveList = [];
      this.getLiveList();
    },
  },
  activated() {
    setDocumentTitle("我的直播间");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.liveList, pageIndex)) {
      this.initData()
    }
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.myprize-entry {
  width:2.7rem;
  height: 2.1rem;
  background: url("../../../assets/i/wap/live/dzp_prize_entry.png") no-repeat
    center center;
  background-size: 100% 100%;
  left: calc(50% + 4.8rem);
  bottom: 6rem;
}
</style>
